import styled from "styled-components";

export const PictureWrapper = styled.div`
position: relative;
  .pictures {
    height: 600px;
    display: flex;
    .cover {
      opacity: 0;
    }
    &:hover {
      .cover {
        opacity: 1;
      }
    }
    .left,.right {
      width: 50%;
      flex-shrink: 0;
      >.item {
        width: 100%;
        position: relative;
        overflow: hidden;
        &:hover {
          .cover {
            opacity: 0;
          }
          >img {
            transform: scale(1.1);
            transition: transform 250ms ease;
          }
        }

        >img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        >.cover {
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          position: absolute;
          background-color: rgba(0,0,0,.5);
        }
      }
    }
    .left {
      .item {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 50%;
        flex-shrink: 0;
      }
    }
  }
  .showAllBtn {
    position: absolute;
    right: 30px;
    bottom: 20px;
    padding: 8px 12px;
    background-color: white;
    border: 1px solid #222;
    border-radius: 4px;
    color: #222;
    cursor: pointer;
    z-index: 9;
  }

`